<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多主题贪吃蛇游戏</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
</head>
<body class="bg-gray-900 text-white">
    <div id="game-container" class="container mx-auto px-4 py-8 flex flex-col items-center">
        <!-- 游戏标题 -->
        <h1 class="text-4xl font-bold mb-6 text-center game-title">多主题贪吃蛇游戏</h1>
        
        <!-- 游戏区域 -->
        <div id="game-area" class="relative">
            <!-- 游戏画布 -->
            <canvas id="game-canvas" width="600" height="600" class="border-4 border-gray-700 rounded-lg shadow-lg"></canvas>
            
            <!-- 游戏UI覆盖层 -->
            <div id="game-ui" class="absolute top-0 left-0 w-full h-full pointer-events-none">
                <!-- 分数显示 -->
                <div id="score-display" class="absolute top-4 left-4 bg-gray-800 bg-opacity-70 px-4 py-2 rounded-lg">
                    <span class="font-bold">分数:</span> <span id="score">0</span>
                </div>
                
                <!-- 时间显示 (时间模式下可见) -->
                <div id="time-display" class="absolute top-4 right-4 bg-gray-800 bg-opacity-70 px-4 py-2 rounded-lg hidden">
                    <span class="font-bold">时间:</span> <span id="time">60</span>
                </div>
                
                <!-- 虚拟控制按钮 (移动设备可见) -->
                <div id="virtual-controls" class="absolute bottom-4 left-1/2 transform -translate-x-1/2 grid grid-cols-3 gap-2 pointer-events-auto hidden">
                    <button class="virtual-btn" data-direction="up">↑</button>
                    <div></div>
                    <div></div>
                    <button class="virtual-btn" data-direction="left">←</button>
                    <button class="virtual-btn" data-direction="down">↓</button>
                    <button class="virtual-btn" data-direction="right">→</button>
                </div>
            </div>
            
            <!-- 游戏菜单 -->
            <div id="main-menu" class="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center bg-gray-900 bg-opacity-90 rounded-lg">
                <h2 class="text-3xl font-bold mb-8">贪吃蛇游戏</h2>
                <div class="flex flex-col gap-4 w-64">
                    <button id="start-game" class="game-btn">开始游戏</button>
                    <button id="settings-btn" class="game-btn">游戏设置</button>
                    <button id="theme-btn" class="game-btn">主题选择</button>
                    <button id="skin-btn" class="game-btn">蛇皮肤</button>
                </div>
            </div>
            
            <!-- 设置菜单 -->
            <div id="settings-menu" class="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center bg-gray-900 bg-opacity-90 rounded-lg hidden">
                <h2 class="text-3xl font-bold mb-6">游戏设置</h2>
                <div class="flex flex-col gap-4 w-80">
                    <div class="setting-group">
                        <label class="block mb-2">难度级别:</label>
                        <div class="flex gap-2">
                            <button class="setting-btn difficulty-btn selected" data-difficulty="easy">简单</button>
                            <button class="setting-btn difficulty-btn" data-difficulty="medium">中等</button>
                            <button class="setting-btn difficulty-btn" data-difficulty="hard">困难</button>
                        </div>
                    </div>
                    
                    <div class="setting-group">
                        <label class="block mb-2">游戏模式:</label>
                        <div class="flex gap-2">
                            <button class="setting-btn mode-btn selected" data-mode="classic">经典</button>
                            <button class="setting-btn mode-btn" data-mode="timed">限时</button>
                        </div>
                    </div>
                    
                    <div class="setting-group">
                        <div class="flex items-center justify-between">
                            <label>障碍物:</label>
                            <label class="switch">
                                <input type="checkbox" id="obstacles-toggle">
                                <span class="slider"></span>
                            </label>
                        </div>
                    </div>
                    
                    <button id="settings-back" class="game-btn mt-4">返回</button>
                </div>
            </div>
            
            <!-- 主题选择菜单 -->
            <div id="theme-menu" class="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center bg-gray-900 bg-opacity-90 rounded-lg hidden">
                <h2 class="text-3xl font-bold mb-6">选择主题</h2>
                <div class="grid grid-cols-2 gap-4 w-80">
                    <div class="theme-option" data-theme="classic">
                        <div class="theme-preview classic-theme"></div>
                        <span>经典</span>
                    </div>
                    <div class="theme-option" data-theme="space">
                        <div class="theme-preview space-theme"></div>
                        <span>太空</span>
                    </div>
                    <div class="theme-option" data-theme="underwater">
                        <div class="theme-preview underwater-theme"></div>
                        <span>海底</span>
                    </div>
                    <div class="theme-option" data-theme="pixel">
                        <div class="theme-preview pixel-theme"></div>
                        <span>像素</span>
                    </div>
                </div>
                <button id="theme-back" class="game-btn mt-6">返回</button>
            </div>
            
            <!-- 皮肤选择菜单 -->
            <div id="skin-menu" class="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center bg-gray-900 bg-opacity-90 rounded-lg hidden">
                <h2 class="text-3xl font-bold mb-6">选择蛇皮肤</h2>
                <div class="grid grid-cols-2 gap-4 w-80">
                    <div class="skin-option" data-skin="default">
                        <div class="skin-preview default-skin"></div>
                        <span>默认</span>
                    </div>
                    <div class="skin-option" data-skin="neon">
                        <div class="skin-preview neon-skin"></div>
                        <span>霓虹</span>
                    </div>
                    <div class="skin-option" data-skin="rainbow">
                        <div class="skin-preview rainbow-skin"></div>
                        <span>彩虹</span>
                    </div>
                    <div class="skin-option" data-skin="metal">
                        <div class="skin-preview metal-skin"></div>
                        <span>金属</span>
                    </div>
                </div>
                <button id="skin-back" class="game-btn mt-6">返回</button>
            </div>
            
            <!-- 游戏暂停菜单 -->
            <div id="pause-menu" class="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center bg-gray-900 bg-opacity-90 rounded-lg hidden">
                <h2 class="text-3xl font-bold mb-6">游戏暂停</h2>
                <div class="flex flex-col gap-4 w-64">
                    <button id="resume-game" class="game-btn">继续游戏</button>
                    <button id="restart-game" class="game-btn">重新开始</button>
                    <button id="exit-to-menu" class="game-btn">返回主菜单</button>
                </div>
            </div>
            
            <!-- 游戏结束菜单 -->
            <div id="game-over" class="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center bg-gray-900 bg-opacity-90 rounded-lg hidden">
                <h2 class="text-3xl font-bold mb-2">游戏结束</h2>
                <p class="mb-6">你的分数: <span id="final-score">0</span></p>
                <div class="flex flex-col gap-4 w-64">
                    <button id="play-again" class="game-btn">再玩一次</button>
                    <button id="game-over-menu" class="game-btn">返回主菜单</button>
                </div>
            </div>
        </div>
        
        <!-- 游戏说明 -->
        <div class="mt-8 max-w-lg text-center">
            <h3 class="text-xl font-bold mb-2">游戏说明</h3>
            <p class="mb-2">使用方向键或触摸屏滑动控制蛇的移动方向。</p>
            <p class="mb-2">吃掉食物增加分数和长度，避免撞到墙壁、障碍物或自己的身体。</p>
            <p>按下 <kbd class="px-2 py-1 bg-gray-700 rounded">ESC</kbd> 键暂停游戏。</p>
        </div>
    </div>

    <script type="module" src="js/game.js"></script>
</body>
</html>